<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>search</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<style type="text/css" media="screen">
	.head{
		margin: 40px auto;
	}
</style>
</head>
<body>
<div id="search">

    <div class="container head">
    	<form role="search">
			  <div class="form-group col-md-11">
			    <input type="text" class="form-control" v-model="txt" placeholder="请输入关键词">
			  </div>
		</form>
		<button @click="sousuo" class="btn btn-default col-md-1">搜索</button>

		<!--文章内容-->
		<div class="content container">
			<div class="row">
				<div class="col-md-7 col-xs-7 col-md-offset-1 col-xs-offset-1 jumbotron">
					<article v-for="(item,index) in article">
						<h3 class="text-center" style="font-size: 20px">{{item.title}}</h3>
						<div class="col-md-12 col-xs-12" v-html="item.content"></div>
					</article>
				</div>

			</div>
		</div>
		<!--文章内容结束-->
    </div>

</div>
       <script type="text/javascript">


    	       var search = new Vue({
		            el:'#search',
		            data:{
		               article:null,
						txt:null,

		            },
		            methods:{
		                sousuo:function() {
		                    let that = this;
		                    $.ajax({
								url:'http://news.cn/index.php/index/page/sousuo',
								type:'post',
								data:{title:this.txt},
								dataType:'json',
								success:function(data) {
								    console.log(data);
								    if(data.code == 1) {
                                        that.article = data.data;
                                    }else {
								        alert("没有搜索到您想要的内容！");
									}
								}
							});
						}
		            }
		        })
    	
    </script>
</body>
</html>